<template>
<div>
   <div class="search">
      <span class="iconfont">&#xe782;</span>
     <input 
     type="text" 
     class="search-input" 
     placeholder="请输入城市名(如北京.bj.beijing)"
     v-model="keyword"
     :class="[changeSearch]"
     >
     <button 
     class="button"
     :class="[changeButton]"
     @click="buttonClick"
     >取消</button>
     <span 
     class="cancel"
     :class="[changeSymbol]"
     @click="xClear"
     >X</span>
  </div>

  <div 
  class="search-content"
  v-show="this.list.length"
  ref="contentWrapper"
  >
         <ul>
           <li class="search-first">
             {{this.show}}
            </li>
            <li 
            class="search-item" 
            v-for="item of list" 
            :key="item.id"
            @click="handleItemClick(item.name)"
            >{{item.name}}</li>
         </ul>
     </div>
</div>
  
</template>

<script>
import BScroll from 'better-scroll'
import {disreslove} from '@/utils/utils.js'
export default {
  name: 'locationHeader',
  props:{
    cities:Object
  },
  data(){
    return{
      show:'请输入城市名（如北京、bj、beijing）',
      keyword:'',
      changeSearch:'',
      changeButton:'',
      changeSymbol:'',
      list:[],
      flag:'1',
      iLeter:'',
      iWord:''
    }
  },
  watch:{
    keyword(){
      let content = this.keyword.trim()  //去除keyword 的前后空格
      this.addClass()   //输入框发生改变时，添加样式的函数
        if(content === ''){
             //如果内容为空
             //flag代表内容为空的区分标志位
             //1代表本身没输入或者逐字清除
             //2代表点击清除按钮
             //剩余的代表点击x按钮
            if( this.flag === '1'){
                this.removeBack()  //flag=1时，恢复最初的样式
            }else if(this.flag === '2'){
                this.keyword = ''   //清空因为引发函数而传进来的空格
                this.removeBack()   //flag=2时，恢复最初的样式
            }else{
              this.keyword = ''
            }
        }else if(/^[0-9]+$/.test()){  //内容为数字
             this.showError()  //清空引擎列表，和提示抱歉找不到数字
        }else if(/^[a-zA-Z]+$/.test(content)){   //内容字母
             this.searchAlph(content)
        }else if(/^[\u4e00-\u9fa5]+$/.test(content)){  //内容时汉字
             this.searchlo(content)
        }else{ //其他内容
             this.showError() //清空引擎列表，和提示抱歉找不到内容
        }
    }
  },
  methods:{
      addClass(){  //添加样式函数
         this.changeSearch="changeSearch"
         this.changeButton="changeButton"
         this.changeSymbol="changeSymbol"
      },
      removeBack(){  //样式清空，去除引擎列表，恢复最初的样式
         this.changeSearch=''
         this.changeButton=''
         this.changeSymbol=''
         this.list = []
         this.show = '请输入城市名（如北京、bj、beijing）'
      },
      buttonClick(){  // 取消按钮的函数 内容清空，列表清空
        this.keyword= ' '  //传入一个空格，是keyword改变，从而触发监听事件
        this.flag = "2"
      } ,
      xClear(){     //x按钮函数
        this.keyword = ' '
        this.flag = '33'
      },
      showError(){  //数字的逻辑
        this.list = ['']
        this.show = '对不起，没有找不到'+this.keyword
      },

      loopAlphabet(lowerContent){
        //将后台数据保存一下
        const citiesWrapper = this.cities
        //将后台数据进行循环
         for(let i in citiesWrapper){
           //对数据进行过滤，判断输入的内容后台数据是否有，也就是是不是能查到
           //substr(提取字符开始的位置-1就是最后一位，提取几个1就是提取1个)
           if( i.toLowerCase().indexOf(lowerContent.substr(0,1))>-1){
             let arr = []
               //对能查到的哪一个对象进行循环，value参数就是得到的数据
               citiesWrapper[i].forEach((value)=>{
                 //用输入内容的最后一位进行提取，添加到一个空数组里面
                 arr.push(value.spell.substr(lowerContent.length-1,1))
                 //es6里面的数组去重，去除arr中重复的数据
                 let a = [...new Set(arr)]
                 //将a这个数组变成字符串，存到一个变量中
                 this.iLeter = a.toString()
               })
           }
         }
      },
       loopWord(content){
        //将后台数据保存一下
        const citiesWrapper = this.cities
        //将后台数据进行循环
         for(let i in citiesWrapper){
           //对数据进行过滤，判断输入的内容后台数据是否有，也就是是不是能查到
           //substr(提取字符开始的位置-1就是最后一位，提取几个1就是提取1个)
           //将汉字转码返回，取返回的哪一个首字母
           if( i.toLowerCase().indexOf(disreslove(content).substr(0,1))>-1){
             //console.log(disreslove(content).substr(0,1))
             let arr = []
               //对能查到的哪一个对象进行循环，value参数就是得到的数据
               citiesWrapper[i].forEach((value)=>{
                 //用输入内容的最后一位进行提取，添加到一个空数组里面
                 arr.push(value.name.substr(content.length-1,1))
                 //es6里面的数组去重，去除arr中重复的数据
                 let a = [...new Set(arr)]
                 //将a这个数组变成字符串，存到一个变量中
                 this.iWord = a.toString()
               })
           }
         }
      },
      //字母判断函数
      searchAlph(content){
         const lowerContent = content. toLowerCase() //将输入的字母内容变成小写
              let result = []
              for( let i in this.cities){ //对城市信息进行循环
                //将输入的内容改变为小写，然后判断输入框内容的首字母是否再数组cities中出现过，
                let haveAlph = i.toLowerCase().indexOf(lowerContent.substr(0,1))>-1
                if(haveAlph){  //如果包含就返回true，不包含就返回false
                     //判断出来了存在，比如是A，然后对A里面的数据进行循环，value就是一个个对象
                     this.cities[i].forEach((value)=>{
                        //判断输入框的内容是否和数据里面的首字母匹配
                     if(value.spell.indexOf(lowerContent)>-1){
                       //将存在的所有数据推到一个新的数组中去
                        result.push(value)
                        //并将新数组添加给list
                        this.list = result
                        //输入框的内容与后台内容进行比如，如果多了，例如biejing写成了beijingxxx
                     }else if(lowerContent.indexOf(value.spell)>-1){
                        //对不起，没有
                       this.show = '对不起，找不到'+this.keyword
                       this.list = [''] //并将引擎搜出来的内容清空
                     }else{
                       // 将输入的内容全部提取出来，和数据进行比对
                       this.loopAlphabet(lowerContent)
                       //将提取出来的内容进行查找，
                       if(!(this.iLeter.indexOf(
                         //查找的就是输入框中截取的最后一个字符
                         lowerContent.substr(
                           //判断是否存在
                           lowerContent.length-1,1))>-1)){
                             this.show = "对不起，找不到"+this.keyword
                             //清空iLeter
                             this. iLeter = ''
                           }
                     }
                     })
                     //如果输入的第一个内容等于uivo，就直接报错
               }else if(lowerContent.substr(0,1) === 'u'||
               lowerContent.substr(0,1) === 'i'||
               lowerContent.substr(0,1) === 'v'||
               lowerContent.substr(0,1) === 'o'){
                   this.show = "对不起，找不到"+this.keyword
                   this.list = ['']
               }
             }
      },
      //文字筛选函数
      searchlo(content){
           let result = []
              for( let i in this.cities){ //对城市信息进行循环
                //将输入的内容改变为小写，
                //将第一个字符截取转码为拼音，再截取第一个拼音转化为小写
                //然后判断输入框内容的首字母是否再数组cities中出现过，
                let haveAlph = i.toLowerCase().indexOf(disreslove(content).substr(0,1))>-1
                console.log(disreslove(content))
                if(haveAlph){  //如果包含就返回true，不包含就返回false
                     //判断出来了存在，比如是A，然后对A里面的数据进行循环，value就是一个个对象
                     this.cities[i].forEach((value)=>{
                        //判断输入框的内容是否和数组里面的name里面的某一个字符串匹配
                     if(value.name.indexOf(content)>-1){
                       //将存在的所有数据推到一个新的数组中去
                        result.push(value)
                        //并将新数组添加给list
                        this.list = result
                        //输入框的内容与后台内容进行比如
                     }else if(content.indexOf(value.name)>-1){
                        //对不起，没有
                       this.show = '对不起，找不到'+this.keyword
                       this.list = [''] //并将引擎搜出来的内容清空
                     }else{
                       // 将输入的内容全部提取出来，和数据进行比对
                       this.loopWord (content)
                       //将提取出来的内容进行查找，
                       if(!(this.iWord.indexOf(
                         //查找的就是输入框中截取的最后一个字符
                         content.substr(
                           //判断是否存在
                           content.length-1,1))>-1)){
                             this.show = "对不起，找不到"+this.keyword
                             //清空iLeter
                             this. iWord = ''
                             this.list = ['']
                           }
                     }
                     })
               }
             }
      },
      handleItemClick(city){
          this.$store.dispatch('change',city)
          this.$router.push('/')
      }
  },
  mounted(){
    //滑轮函数
    this.scroll = new BScroll(this.$refs.contentWrapper,{
          click:true,
          mouseWheel:{
              speend:20,
              invert:false,
              easeTime:300
          }
      })

  }
}
</script>

<style lang="stylus"  scoped>
.search
  position:relative
  height:.72rem
  background:#e0e4ec
  padding:.2rem
  .iconfont
    position:absolute
    top:.4rem
    left:.4rem
    color:#666
  .search-input
    height:.72rem
    line-height:.72rem
    width:100%
    text-align:left
    box-sizing:border-box
    padding-left:.6rem
    border-radius:.06rem
    color:#666
  .changeSearch
    width:88%
    margin-right:.1rem
  .button
    display:none
  .changeButton
    display:block
    color:#888
    font-weight:bold
    position:absolute
    top:.29rem
    right:.22rem
    z-index:101
    font-size:.35rem
    text-align:center
  .cancel
    display:none
  .changeSymbol
    display:block
    position:absolute
    top:.32rem
    right:1.3rem
    color:#fff
    z-index:101
    background:#ccc
    padding:.12rem
    border-radius:.2rem
.search-content
  overflow:hidden
  position:absolute
  z-index:101
  top:1.1rem
  left:0
  right:0
  bottom:0
  background:#eee
  .search-first
    line-height:.22rem
    padding:.1rem
    margin-bottom:.06rem
    color:#666
    background:#fff
    font-size:.1rem
    color:#aaa
  .search-item
    line-height:.82rem
    padding-left:.2rem
    margin-bottom:.06rem
    color:#666
    background:#fff
</style>